<template>
  <div class="Membershipcard">
    <div class="header-1">
    </div>
    <!-- 乘客信息 -->
    <div class="header-1">
      <div class="header-1-1-1">
        <span class="tit_t">乘客信息</span>
      </div>
    </div>
    <el-table border :data="QueryList" size="mini" :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" style="width: 100%; margin-top: 20px; margin-left: 10px">
      <el-table-column prop="orderId" label="编号" width="150">
      </el-table-column>
      <el-table-column prop="passengerName" label="乘客姓名" width="80">
      </el-table-column>
      <!-- <el-table-column prop="guestName" label="车票类型" width="80">   
      </el-table-column> -->
      <el-table-column prop="idType" label="证件类型" width="106">
        <template slot-scope="scope">
          <template v-if="scope.row.idType=='ZGJMSFZ'">中国居民身份证</template>
          <template v-if="scope.row.idType=='GATJMJZZ'">港澳台居民居住证</template>
          <template v-if="scope.row.idType=='HZ'">护照</template>
          <template v-if="scope.row.idType=='GAJMLWNDTXZ'">港澳居民来往内地通行证</template>
          <template v-if="scope.row.idType=='TWJMLWDLTXZ'">台湾居民来往大陆通行证</template>
          <template v-if="scope.row.idType=='WGRYJJLSFZ'">外国人永久居留身份证</template>
        </template>
      </el-table-column>
      <el-table-column prop="idNumber" label="证件号" width="150">
      </el-table-column>
      <!-- <el-table-column prop="cabin" label="证件有效期" width="80">
      </el-table-column> -->
      <el-table-column prop="ticketNumber" label="票号" width="146">
      </el-table-column>
       <el-table-column prop="trainNumber" label="车次号" width="60">
      </el-table-column>
      <el-table-column prop="trainBox" label="车厢号" width="60">
      </el-table-column>
      <el-table-column prop="seatNo" label="座位号" width="60">
      </el-table-column>
      <!-- <el-table-column prop="sex" label="性别" width="100">
        <template slot-scope="scope">
            <template v-if="scope.row.sex == 1">男</template>
            <template v-if="scope.row.sex == 2">女</template>
        </template>
      </el-table-column> -->
       <el-table-column prop="seatType" label="席别" width="70">
        <template slot-scope="scope">
          {{scope.row.seatType | seatType}}
        </template>
      </el-table-column>
      <el-table-column prop="departureTime" label="出发时间" width="130">
      </el-table-column>
      <el-table-column prop="arrivalTime" label="到达时间" width="130">
      </el-table-column>
      <el-table-column prop="ticketAmount" label="票价" width="50">
      </el-table-column>
        <el-table-column prop="departureStationName" label="出发站" width="80">
      </el-table-column>
        <el-table-column prop="arrivalStationName" label="到达站" width="80">
      </el-table-column>
         <el-table-column label="车票类型" width="80">
          <template slot-scope="scope">
            {{scope.row.ticketType == 'adult'?'成人票':'儿童票'}}
          </template>
      </el-table-column>
      <el-table-column label="订单状态">
        <template slot-scope="scope">
          {{scope.row.orderItemStatus | orderStatus}}
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" width="120px" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="
                scope.row.status == 'payd' ||
                scope.row.status == 'ticketing' ||
                scope.row.status == 'changeTicketSuccess'" size="mini" type="primary"
              @click="handleDetails(scope.$index, scope.row)">退票</el-button>
          </template>
        </el-table-column> -->
    </el-table>
    <!-- 改签信息 -->
    <div class="header-1" v-if="changeListArr.length">
      <div class="header-1-1-1">
        <span class="tit_t">改签信息</span>
      </div>
    </div>
    <el-table border v-if="changeListArr.length" :data="changeListArr" size="mini" :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" style="width: 100%; margin-top: 20px; margin-left: 10px">
      <el-table-column prop="orderId" label="编号" width="150">
      </el-table-column>
      <el-table-column prop="passengerName" label="乘客姓名" width="80">
      </el-table-column>
      <el-table-column prop="ticketNumber" label="票号" width="146">
      </el-table-column>
      <el-table-column prop="changeAmount" label="差价" width="50">
      </el-table-column>
      <el-table-column prop="payType" label="支付/退回方式" width="102">
        <template slot-scope="scope">
          {{scope.row.payType | payType(scope.row.changeAmount)}}
        </template>
      </el-table-column>
      <el-table-column prop="payStatus" label="状态" width="80">
        <template slot-scope="scope">
          {{scope.row.payStatus | payStatus}}
        </template>
      </el-table-column>
       <el-table-column prop="trainNumber" label="车次号" width="60">
      </el-table-column>
      <el-table-column prop="trainBox" label="车厢号" width="60">
      </el-table-column>
      <el-table-column prop="seatNo" label="座位号" width="60">
      </el-table-column>
       <el-table-column prop="seatType" label="席别" width="70">
        <template slot-scope="scope">
          {{scope.row.seatType | seatType}}
        </template>
      </el-table-column>
      <el-table-column prop="departureTime" label="出发时间" width="130">
        <template slot-scope="scope">
          {{ setDate(getTimes(scope.row.departureDate))+" "+ scope.row.departureTime}}
        </template>
      </el-table-column>
      <el-table-column prop="arrivalTime" label="到达时间" width="130">
        <template slot-scope="scope">
          {{ setDate(getTimes(scope.row.departureDate),"add", QueryLists.addDay)+" "+scope.row.arrivalTime}}
        </template>
      </el-table-column>
      <el-table-column prop="departureStation" label="出发站" width="80">
      </el-table-column>
      <el-table-column prop="arrivalStation" label="到达站" width="80">
      </el-table-column>
      <el-table-column label="车票类型" width="80">
        <template slot-scope="scope">
          {{scope.row.ticketType == 'adult'?'成人票':'儿童票'}}
        </template>
      </el-table-column>
      <el-table-column label="订单状态">
        <template slot-scope="scope">
          {{scope.row.orderItemStatus | orderStatus}}
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" width="120px" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="
                scope.row.status == 'payd' ||
                scope.row.status == 'ticketing' ||
                scope.row.status == 'changeTicketSuccess'" size="mini" type="primary"
              @click="handleDetails(scope.$index, scope.row)">退票</el-button>
          </template>
        </el-table-column> -->
    </el-table>
    <div>
      <div class="header-1">
        <div class="header-1-1-1">
          <span class="tit_t">免费儿童列表</span>
        </div>
      </div>
      
    <el-table border :data="freeChildList" size="mini" :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" style="width: 100%; margin-top: 20px; margin-left: 10px">
      <el-table-column prop="orderId" label="编号" width="150">
      </el-table-column>
      <el-table-column prop="passengerName" label="乘客姓名" width="80">
      </el-table-column>
      <el-table-column prop="parentName" label="监护人姓名" width="120">
      </el-table-column>
      <!-- <el-table-column prop="guestName" label="车票类型" width="80">   
      </el-table-column> -->
      <el-table-column prop="idType" label="证件类型" width="130">
        <template slot-scope="scope">
          <template v-if="scope.row.idType=='ZGJMSFZ'">中国居民身份证</template>
          <template v-if="scope.row.idType=='GATJMJZZ'">港澳台居民居住证</template>
          <template v-if="scope.row.idType=='HZ'">护照</template>
          <template v-if="scope.row.idType=='GAJMLWNDTXZ'">港澳居民来往内地通行证</template>
          <template v-if="scope.row.idType=='TWJMLWDLTXZ'">台湾居民来往大陆通行证</template>
          <template v-if="scope.row.idType=='WGRYJJLSFZ'">外国人永久居留身份证</template>
        </template>
      </el-table-column>
      <el-table-column prop="idNumber" label="证件号">
      </el-table-column>
    </el-table>
    </div>
    <!-- 预定信息 -->
    <div class="header-1">
      <div class="header-1-1-1">
        <span class="tit_t">预定信息</span>
      </div>
    </div>
    <div class="table">
      <table>
        <tr>
          <td class="td-1">车次号</td>
          <td class="td-2">{{QueryLists.trainNumber}}</td>
          <td class="td-1">出发地</td>
          <td class="td-2">{{QueryLists.departureStation}}</td>
          <td class="td-1">到达地</td>
          <td class="td-2">{{QueryLists.arrivalStation}}</td>
        </tr>
        <tr>
          <td class="td-1">订单号</td>
          <td class="td-2">{{QueryLists.orderId}}</td>
          <td class="td-1">出发时间</td>
          <td class="td-2">{{QueryLists.departureDate+" "+QueryLists.departureTime}}</td>
          <td class="td-1">到达时间</td>
          <td class="td-2">{{setDate(getTimes(QueryLists.departureDate),"add", QueryLists.addDay)+" "+QueryLists.arrivalTime}}</td>
        </tr>
        <tr>
          <td class="td-1">乘车日期</td>
          <td class="td-2">{{QueryLists.departureDate}}</td>
          <td class="td-1">订单状态</td>
          <td class="td-2">
            <span>{{ QueryLists.orderStatus | orderStatus }}</span>
          </td>
          <td class="td-1">坐席</td>
          <td class="td-2">{{QueryLists.seatType | seatType}}</td>
        </tr>
        <tr>
          <td class="td-1">票总价</td>
          <td class="td-1">{{QueryLists.ticketTotalAmount}}</td>
          <td class="td-1">总价</td>
          <td class="td-1">{{QueryLists.ticketTotalAmount+QueryLists.serviceCharge}}</td>
          <td class="td-1">支付价</td>
          <td class="td-1">{{QueryLists.actualPayAmount}}</td>

        </tr>
        <tr>
          <td class="td-1">金币</td>
          <td class="td-1">{{QueryLists.goldAmount}}</td>
          <td class="td-1">预留款</td>
          <td class="td-1">{{QueryLists.reserveAmount}}</td>
          <td class="td-1">优惠券</td>
          <td class="td-1">{{QueryLists.couponAmount}}</td>
        </tr>
        <tr>
          <td class="td-1">订单过期时间</td>
          <td class="td-2">{{QueryLists.cancelTime}}</td>
          <td class="td-1">12306取票号</td>
          <td class="td-2">{{QueryLists.order12306Id}}</td>
          <td class="td-1">联系人手机号</td>
          <td class="td-2">{{ QueryLists.contactPhone}}</td>
        </tr>
        <tr>
          <!-- <td class="td-1">占座描述信息</td>
          <td class="td-2">{{QueryLists.msg}}</td> -->
          <!-- <td class="td-1">订单类型</td>
          <td class="td-2">{{QueryLists.orderType}}</td> -->
          <td class="td-1">订单创建时间</td>
          <td class="td-2">{{QueryLists.createTime}}</td>
          <td class="td-1">是否占座成功</td>
          <td class="td-2">{{QueryLists.isOrderSuccess=='no'?'否' :'是'}}</td>
          <td class="td-1">历时</td>
          <td class="td-2">{{ QueryLists.runningTime}}</td>
        </tr>
        <!-- <tr>
          <td class="td-1">出票渠道</td>
          <td class="td-2">{{ QueryLists.ticketingChannel}}</td>
        </tr> -->
        <tr>
          <td class="td-1">服务费</td>
          <td class="td-2">{{QueryLists.serviceCharge}}</td>
          <td class="td-1">预定时间</td>
          <td class="td-2">{{QueryLists.createTime}}</td>
          <td class="td-1">预定员</td>
          <td class="td-2">{{ QueryLists.operatorName}}</td>
        </tr>
        <tr>
          <!-- <td class="td-1">保险费</td>
          <td class="td-2">{{QueryLists.insurance}}</td> -->
          <td class="td-1">支付方式</td>
          <td class="td-2">
            {{QueryLists.payType | payType}}
          </td>
          <td class="td-1">平台交易号</td>
          <td class="td-2">{{ QueryLists.transactionNum}}</td>
          <td class="td-1">积分</td>
          <td class="td-1">{{QueryLists.integralAmount}}</td>
        </tr>
        <tr>
          <td class="td-1">联系人</td>
          <td class="td-2">{{QueryLists.contactName}}</td>
          <td class="td-1">合作方订单号</td>
          <td class="td-2">{{QueryLists.tripartiteOrderId}}</td>
          <td class="td-1">预定来源</td>
          <td class="td-2">{{QueryLists.orderSource | orderSource}}</td>
        </tr>
      </table>
      <table>
        <tr>
          <td class="td-1">备注</td>
          <td class="td-4"></td>
        </tr>
        <tr>
          <td class="td-1">退票政策</td>
          <td class="td-4" style="padding:10px;">
            1、成人退票时，如名下有儿童票，需一同退票。<br />
            2、开车前8天（含）以上退票的，不收取退票费；票面乘车站开车时间前48小时以上的按票价5%计，24小时以上、不足48小时的按票价10%计，不足24小时的按票价20%计。<br />
            3、开车前48小时～8天期间内，改签或变更到站至距开车8天以上的其他列车，又在距开车8天前退票的，仍核收5%的退票费。<br />
            4、办理车票改签或“变更到站”时，新车票票价低于原车票的，退还差额，对差额部分核收退票费并执行现行退票费标准。<br />
            5、上述计算的尾数以5角为单位，尾数小于2.5角的舍去、2.5角及以上且小于7.5角的计为5角、7.5角及以上的进为1元。退票费最低按2元计收。  <br />
            6、在火车站人工窗口退票后，还需在系统再次申请退票，以便退回退票款。<br />
            7、退票到账时间退票成功后，将向您注册时提供的手机号发送退票成功短信，最终退票时间以铁路局实退为准。退款到账时间约为3~21天。（15个工作日内，请您耐心等待）  <br />
          </td>
        </tr>
      </table>
    </div>
    <!-- 操作日志 -->
    <div class="header-1">
      <div class="header-1-1-1">
        <span class="tit_t">操作日志</span>
      </div>
    </div>
    <div>
      <el-table :data="QueryLists.operationLogBOS" :header-cell-style="{ 
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" border style="width: 100%">
        <el-table-column label="操作标题" prop="operationDescription" width="300">
        </el-table-column>
        <el-table-column label="操作人姓名" prop="employeeName" width="300">
        </el-table-column>
        <el-table-column prop="operationTime" label="操作时间">
        </el-table-column>
        <el-table-column prop="operationContent" label="操作内容"></el-table-column>
      </el-table>
    </div>
    <div v-if="QueryLists.payRecordBOS && QueryLists.payRecordBOS.length">
      <div class="header-1">
        <div class="header-1-1-1">
          <span class="tit_t">支付日志</span>
        </div>
      </div>
      <div>
        <el-table :data="QueryLists.payRecordBOS" :header-cell-style="{ 
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }" border style="width: 100%">
        <el-table-column label="序号" prop="id" width="60"></el-table-column>
        <el-table-column label="单号" prop="orderId"  width="180"></el-table-column>
        <el-table-column label="类型" prop="recordType"  width="100">
          <template slot-scope="scope">
            {{ scope.row.recordType === "pay" ? "支付": scope.row.recordType === "refund" ? "退款":"其他"}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="160"></el-table-column>
        <el-table-column label="状态" prop="operationDescription" width="80">
          <template slot-scope="scope">
            {{ scope.row.recordStatus === "yes" ? "成功": scope.row.recordStatus === "no" ? "失败":"其他"}}
          </template>
        </el-table-column>
        <el-table-column label="支付流水号" prop="payNumber">
          <template slot-scope="scope">
            {{ scope.row.payNumber ? scope.row.payNumber: "暂无" }}
          </template>
        </el-table-column>
        <el-table-column label="退款申请号" prop="refundNumber">
          <template slot-scope="scope">
            {{ scope.row.refundNumber ? scope.row.refundNumber: "暂无" }}
          </template>
        </el-table-column>
        <el-table-column label="操作金额" prop="amount"></el-table-column>
        </el-table>
      </div>
    </div>

<!-- 短信信息   前端加完  后台接口未修改 -->

    <div class="header-1">
      <div class="header-1-1-1">
        <span class="tit_t">短信信息</span>
      </div>
    </div>
    <div>
      <el-table :data="SMSinformation" :header-cell-style="{ 
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" border style="width: 100%">
        <el-table-column label="发送时间" prop="title" width="300">
        </el-table-column>
        <el-table-column label="发送状态" prop="name" width="300">
        </el-table-column>
        <el-table-column prop="time" label="短信内容">
        </el-table-column>
        <el-table-column  label="操作">
          <el-button type="primary" size="mini">重发</el-button>
        </el-table-column>
      </el-table>
    </div>

    <el-button class="button" type="success" @click="success">返回</el-button>
        <!-- 退票 -->
        <el-dialog title="退票" :visible.sync="cancellog" :close-on-click-modal="false" width="60%">
      <el-table size="mini" ref="multipleTable" :data="trainOrderItemList" tooltip-effect="dark">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="guestName" label="乘客姓名" width="100">
        </el-table-column>
        <el-table-column prop="iDNumber" label="证件号"> </el-table-column>
        <!-- <el-table-column
          prop="seatType"
          label="坐席类型"
          width="120">
        </el-table-column> -->
        <el-table-column prop="ticketNumber" label="票号" width="160">
        </el-table-column>
        <el-table-column prop="trainBox" label="车厢号" width="120">
        </el-table-column>
        <el-table-column prop="seatNo" label="座位号" width="120">
        </el-table-column>
      </el-table>
      <!-- 退款方式 -->
      <!-- <el-radio-group v-model="refundway">
        <el-radio label="线上品牌商赞助">原路返回</el-radio>
        <el-radio label="线下场地免费">退至预留款</el-radio>
      </el-radio-group> -->
      <!-- <el-button style="background-color: #6090ec; color: #fff; margin: 10px 10px 0 36%" @click="getretreatTicket">确认退票
      </el-button>
      <el-button style="background-color: #6090ec; color: #fff; " @click="cancellog=false">取消</el-button> -->
    </el-dialog>
    
  </div>
</template>
<script>
  import {setDate,getTimes} from "../../common/formatTime"
  export default {
    name: "Membershipcard",
    data() {
      return {
        trainOrderItemList:[],
        refundListArr:[],
        changeListArr:[],
        // 短信信息
        SMSinformation:[],
        cancellog:false,
        train:{},
        orderno: "",
        jsjid: "",
        condition: {},
        customerId: "",
        // 会员信息
        Member: {
          customerName: "",
          customerCard: "",
          jsiId: "",
        },
        // 订单号
        ordernumber: "",
        QueryList: [],
        QueryLists: {},
        freeChildList:[], //免费儿童列表
        // 乘客信息列表
        passengerInformationList: {},
      };
    },
    filters: {
      payType(val,num){
        if(!num) num = 0;
        num = num*1
        if(!val&&num == 0) return "暂无"
        if(!val&&num < 0) return "原路退回"
        if(val == "creditcard") return "信用卡"
        if(val == "debitcard") return "储蓄卡"
        if(val == "unionPayQrCode") return "银联二维码"
        if(val == "unionPayProgram") return "银联小程序"
      },
      seatType(val){
        if(!val) return "暂无"
        if(val == 0) return "无座"
        if(val == 1) return "硬座"
        if(val == 2) return "软座"
        if(val == 3) return "硬卧"
        if(val == 4) return "软卧"
        if(val == 5) return "包厢硬卧"
        if(val == 6) return "高级软卧"
        if(val == 7) return "一等软座"
        if(val == 8) return "二等软座"
        if(val == 9) return "商务座"
        if(val == "A") return "高级动卧"
        if(val == "E") return "特等软座"
        if(val == "F") return "特等软座"
        if(val == "H") return "一人软包"
        if(val == "I") return "一等卧"
        if(val == "J") return "二等卧"
        if(val == "M") return "一等座"
        if(val == "O") return "二等座"
        if(val == "P") return "特等座"
        if(val == "Q") return "多功能座"
      }
    },
    methods: {
      setDate,
      getTimes,
      handleDetails(index, row) {
        this.cancellog = true;
        this.train = row;
        this.getretreat(row);
      },
       // 退票申请
       getretreat(row) {
        console.log(row);
        this.$axios
          .getretreat({
            orderNumber: this.train.ordernumber,
            // 会员id
            customerId: String(this.train.jsjid),
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.trainOrderItemList = res.data.guestInformations;
              console.log(this.trainOrderItemList);
            }
          });
      },
      success() {
        this.$router.push({
          name: "trainOrder",
        });
        // this.$router.go(0)
      },
      // 订单详情
      getqueryTrainOrder() {
        
      console.log(1)
        this.$axios
          .getqueryTrainOrder({
            orderId: String(this.condition.orderId),
            // customerId: String(this.jsjid),
            //  orderNumber: '1660290079089',
            //   customerId:'152'
          })
          .then((res) => {
            if (res.code == "00000") {
              // guestInformations
              this.detaileStatus(res.data)
              this.QueryList = res.data.orderItemBOS;
                for (let i = 0; i < this.QueryList.length; i++) {
                 this.QueryList[i].trainNumber = res.data.trainNumber
                 this.QueryList[i].seatType = res.data.seatType
                 this.QueryList[i].departureTime = res.data.departureDate+' '+res.data.departureTime
                 this.QueryList[i].arrivalTime = this.setDate(this.getTimes(res.data.departureDate),"add",res.data.addDay)+' '+res.data.arrivalTime
                 console.log(res.data.addDay)
                 console.log(this.setDate(this.getTimes(res.data.departureDate),"add",res.data.addDay))
                 this.QueryList[i].departureStationName = res.data.departureStation
                 this.QueryList[i].arrivalStationName = res.data.arrivalStation
                 this.QueryList[i].orderStatus = res.data.orderStatus
                 if(this.QueryList[i].freeChildrenOrder){
                  let freeChildItem = JSON.parse(JSON.stringify(this.QueryList[i].freeChildrenOrder))
                  freeChildItem["parentName"] = this.QueryList[i].passengerName;
                  this.freeChildList.push(freeChildItem)
                 }
              }
              this.QueryLists = res.data;
              localStorage.setItem("isToken", true);
            }
          });
      },
      //获取改签及退票信息
      detaileStatus(data){
        // 深拷贝数据,以防止联动修改
        let orderItemS =JSON.parse(JSON.stringify(data.orderItemBOS)),changeRefundS =JSON.parse(JSON.stringify(data.changeRefundBOS));
        // 改签/退票列表有数据则合并到主订单列表
        if(changeRefundS.length){
          orderItemS.forEach((item)=>{
            if(!item.refundList) item.refundList = new Object();
            if(!item.changeList) item.changeList = new Object();
            changeRefundS.forEach((changeItem)=>{
              if(item.id === changeItem.orderItemId){
                if(changeItem.orderStatus === "changeRefundTicketSuccess" || changeItem.orderStatus === "refundTicketSuccess"){
                  item.refundList=changeItem;
                  this.refundListArr.push(Object.assign(item,changeItem));
                }else if(changeItem.orderStatus === "changeTicketSuccess" || changeItem.orderStatus === "changeTicket" || changeItem.orderStatus === "changeTicketFail"){
                  item.changeList=changeItem;
                  this.changeListArr.push(Object.assign(item,changeItem));
                }
              }
            })
          })
        }
      },
    },

    mounted() {
      console.log(setDate)
      let orderId = this.$route.params.orderNumber || this.$route.params.orderId
      this.condition = this.$route.params.fsadaf || { orderId};
      this.jsjid = this.condition.jsjid;
      // console.log(this.$route.params.orderNumber)
      // console.log(this.Member.jsiId);
      this.getqueryTrainOrder();
    },
  };
</script>
<style scoped>
  /* 顶部 */
  .header-1-1-1 {
    margin: 20px;
    color: black;
    font-weight: bold;
  }

  .button {
    margin-left: 44%;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .table {
    border: 1px solid #f0f2f6;
    width: 100%;
  }

  .td-1 {
    width: 150px;
    height: 40px;
    background-color: #faffff;
    border-right: 0.5px solid #bcbec6;
    border-bottom: 0.5px solid #bcbec6;
  }

  .td-2 {
    width: 300px;
    border-right: 0.5px solid #bcbec6;
    border-bottom: 0.5px solid #bcbec6;
  }

  .td-4 {
    width: 800px;
    border-right: 0.5px solid #bcbec6;
    border-bottom: 0.5px solid #bcbec6;
  }
</style>